
var ison = false;
var isoff= false;
var lp_over = true;
var count1=0;
var count2=0;

function fdoclick(event){
	if (event.target != this){
		console.log('fdoclick不是本身',event);
	}else{
	console.log('fdoclick是本身',event);
	var tartag = event.target.id;
	
	var r_txt1 =document.getElementById("r_txt1");
	r_txt1.innerHTML = event.clientX+' '+ tartag;
	var r_txt2 =document.getElementById("r_txt2");
	r_txt2.innerHTML = event.clientY;
	
	var r_txt3 =document.getElementById("r_txt3");
	r_txt3.innerHTML = event.screenX;
	var r_txt4 =document.getElementById("r_txt4");
	r_txt4.innerHTML = event.screenY;
	
	var r_txt5 =document.getElementById("r_txt5");
	r_txt5.innerHTML = event.offsetX;
	var r_txt6 =document.getElementById("r_txt6");
	r_txt6.innerHTML = event.offsetY;
	
	var r_txt7 =document.getElementById("r_txt7");
	r_txt7.innerHTML = event.x; //相对于它父元素的位置
	var r_txt8 =document.getElementById("r_txt8");
	r_txt8.innerHTML = event.y; //相对于它父元素的位置
	
	var r_txt9 =document.getElementById("r_txt9");
	r_txt9.innerHTML = event.pageX;
	var r_txtA =document.getElementById("r_txtA");
	r_txtA.innerHTML = event.pageY;
	
	var r_txtB =document.getElementById("r_txtB");
	r_txtB.innerHTML = event.layerX;
	var r_txtC =document.getElementById("r_txtC");
	r_txtC.innerHTML = event.layerY;
	}
}

function fdomove_offset(event){
	//console.log(event);
	let oX = event.offsetX; //基于事件源元素的坐标系，可能是子元素
	let oY = event.offsetY;
	let bIn = false;
	if (oX>=-10 && oX <= 20){
		bIn = true;
	};
	if (bIn && (!ison)){
		fsetcome();
	};
	if ((!bIn) && (!isoff) &&(lp_over)){
		fsetout();
	};
	count1++;
	var c1 =document.getElementById("c1");
	c1.innerHTML = count1;
}

function fdomove(event){
	//console.log(event); 
	if (event.target != this){
		console.log('fdomove不是本身',event);
	}else{
		let laX = event.layerX; //基于本事件主体的坐标系
		let laY = event.layerY; //基于本事件主体的坐标系
		let bIn = false;
		if (laX>=0 && laX <= 40){
			bIn = true;
		};
		count1++;
		var c1 =document.getElementById("c1");
		c1.innerHTML = count1;
		var n1 =document.getElementById("n1");
		n1.innerHTML = event.target.id+',laX:'+laX+',bIn:'+bIn
		  +',isoff:'+isoff+',ison:'+ison+',lp_over:'+lp_over;

		var n2 =document.getElementById("n2");
		if (bIn && (!ison)){
			fsetcome();
			n2.innerHTML = 'fsetcome';
		};
		if ((!bIn) && (!isoff) &&(lp_over)){
			fsetout();
			n2.innerHTML = 'fsetout';
		};
	}
}
function fdoout(event){
	//console.log(event);
		fsetout();
}

function fdoover(event){
	//console.log(event);
		fsetout();
}

function fdolp_move(event){
	//console.log("lp_move",event);
	//lp_over = false;
	if (event.target != this){
		console.log('fdolp_move不是本身',event);
	}else{
		if (!lp_over){
		var r_txtD =document.getElementById("r_txtD");
		r_txtD.innerHTML = event.offsetX;
		var r_txtE =document.getElementById("r_txtE");
		r_txtE.innerHTML = event.offsetY;
		count2++;
		var c2 =document.getElementById("c2");
		c2.innerHTML = count2;
		};
		lp_over = false;
	}
}
function fdolp_out(event){
	//console.log("fdolp_out",event);
	lp_over = true;
	var r_txtD =document.getElementById("r_txtD");
	r_txtD.innerHTML = '0';
	var r_txtE =document.getElementById("r_txtE");
	r_txtE.innerHTML = '0';
	//alert(r_txtE.innerHTML);
}
function fdolp_over(event){
	console.log("lp_over",event);
	lp_over = true;
	var r_txtD =document.getElementById("r_txtD");
	r_txtD.innerHTML = '0';
	var r_txtE =document.getElementById("r_txtE");
	r_txtE.innerHTML = '0';
	//alert(r_txtE.innerHTML);
}

function fdolp_move2(event){
	//console.log(event); 
	if (event.target != this){
	//	console.log('fdolp_move2不是本身',event);
	}else{
		//console.log('fdolp_move2是本身',event);
		let myH = event.target.offsetHeight; 
		let myW = event.target.offsetWidth; 
		if (myW<20) myW=20;
		let laX = event.layerX; //基于本事件主体的坐标系
		let laY = event.layerY; //基于本事件主体的坐标系
		let bIn = false;
		if (laX>=1 && laX <= myW-1){
			if (laY>=10 && laY <= myH-12){
				bIn = true;
			};
		};
		count1++;
		var c1 =document.getElementById("c1");
		c1.innerHTML = count1;
		var n1 =document.getElementById("n1");
		n1.innerHTML = event.target.id+',laX:'+laX+',laY:'+laY
		  +',myH:'+myH+',bIn:'+bIn
		  +',isoff:'+isoff+',ison:'+ison;

		var n2 =document.getElementById("n2");
		if (bIn && (!ison)){
			fsetcome();
			n2.innerHTML = 'fsetcome';
		};
		if ((!bIn) && (!isoff)){
			fsetout();
			n2.innerHTML = 'fsetout';
		};
	}
}
function fdolp_out2(event){
	if (event.target != this){
		//console.log('fdolp_out2不是本身',event);
	}else{
		//console.log('fdolp_out2是本身',event);
		let myH = event.target.offsetHeight; 
		let myW = event.target.offsetWidth; 
		let laX = event.layerX; //基于本事件主体的坐标系
		let laY = event.layerY; //基于本事件主体的坐标系
		let bIn = false;
		if (laX>1 && laX < myW-4){
			if (laY>1 && laY < myH-4){
				bIn = true;
			};
		};
		var n1 =document.getElementById("n1");
		n1.innerHTML = event.target.id+',laX:'+laX+',laY:'+laY
		  +',bIn:'+bIn;
		var n2 =document.getElementById("n2");
		if (!bIn){
		    fsetout();
			n2.innerHTML = 'fsetout';
		}
	}
}


function finit(event){
	console.log("finit");
	var divdemo =document.getElementById("divdemo");
	//divdemo.onmousemove = fdomove;
//不行,太复杂	divdemo.addEventListener("mousemove",fdomove,true);
//不行,太复杂	divdemo.addEventListener("click",fdoclick,true);
//不行,太复杂	divdemo.addEventListener("mouseout",fdoout,true);
	//divdemo.addEventListener("mouseover",fdoover);
	
	var left_panel =document.getElementById("left_panel");
	//left_panel.addEventListener("mouseover",fdolp_over,true);
//	left_panel.addEventListener("mousemove",fdolp_move,true);
//	left_panel.addEventListener("mouseout",fdolp_out,true);
	left_panel.addEventListener("click",fdoclick,true);
	left_panel.addEventListener("mousemove",fdolp_move2,true);
	left_panel.addEventListener("mouseout",fdolp_out2,true);
	
	var sb_opr1 =document.getElementById("sb_opr1");
	sb_opr1.addEventListener("click",fplayaudio,true);
	var sb_opr2 =document.getElementById("sb_opr2");
	sb_opr2.addEventListener("click",fplayaudio,true);
	
	var audio1 = document.getElementById("audio1");
    audio1.onended=function(){
		if (audio1.srcbtn){
			audio1.srcbtn.innerText="播放";
		}
	}
}

window.onload= function(){
	console.log("window.onload");
	finit();	
}

function fsetcome(){
	ison = true;
	var lp =document.getElementById("left_panel");
	lp.className = "left_panel";
	isoff = false;
	lp_over = false;
}

function fsetout(){
	isoff = true;
	var lp =document.getElementById("left_panel");
	lp.className = "left_panel_out";
	ison = false;
	lp_over=true;
}

function fplayaudio(event){
	//console.log("fplayaudio",event);
	var itxt = event.srcElement.innerText;
	if (itxt=="播放"){
		//console.log("fplayaudio",event.srcElement.dataset.src);
	    var audio1 = document.getElementById("audio1");
		audio1.src = event.srcElement.dataset.src;
		audio1.play();
		audio1.srcbtn=event.srcElement;
		event.srcElement.innerText="停止";
	}else{
	    var audio1 = document.getElementById("audio1");
		audio1.pause();
		event.srcElement.innerText="播放";
	}
}